<template>
	<view class="page">
		<view class="group_2">
			<view class="" style="width: 100%;height: 1rpx;background-color: #dedede;"></view>
			<view class="group_3">
				<text lines="1" class="text_2">支付方式图标</text>
				<view class="section_11">
					<image
						src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/085daf5db91a498e8c78611923004528_mergeImage.png"
						class="label_4"></image>
				</view>
				<text lines="1" class="text_8">票名称</text>
				<view class="item">
					篮球票
				</view>
				<text lines="1" class="text_8">票分类</text>
				<view class="item">
					分类1
				</view>


				<text lines="1" class="text_2">选择会员</text>
				<view class="section_12">
					<view class="box_3" style="display: flex;flex-direction: column; ">
						<view class="text-group_1">充值次数</view>
						<view class="text-group_2">3</view>
					</view>
					<view class="image-text_1" style="display: flex;flex-direction: column; ">
						<view class="text-group_1">赠送次数</view>
						<view class="text-group_2">4</view>
					</view>
				</view>

				<text lines="1" class="text_8">选择项目</text>
				<view class="item">
					游泳
				</view>

				<view  style="display: flex;flex-direction: row; justify-content: space-between;margin-left: 20rpx;width: 40vw;margin-top: 20rpx; ">
					<view >
						启用有效期
					</view>
					<view >
						<u-switch v-model="values1" disabled ></u-switch>
					</view>
				</view>
				
				<view  style="display: flex;flex-direction: row; justify-content: space-between;margin-left: 20rpx;width: 40vw;margin-top: 20rpx; ">
					<view >
						启用有效天数
					</view>
					<view >
						<u-switch v-model="values2" disabled ></u-switch>
					</view>
				</view>
				
				<text lines="1" class="text_8">指定有效期</text>
				<view class="item">
					2000-20-20
				</view>
				
				<view  style="display: flex;flex-direction: row; justify-content: space-between;margin-left: 20rpx;width: 40vw;margin-top: 20rpx; ">
					<view >
						启用库存
					</view>
					<view >
						<u-switch v-model="values3" disabled ></u-switch>
					</view>
				</view>
				
				<view  style="display: flex;flex-direction: row; justify-content: space-between;margin-left: 20rpx;width: 40vw;margin-top: 20rpx; ">
					<view >
						启用手环
					</view>
					<view >
						<u-switch v-model="values4" disabled ></u-switch>
					</view>
				</view>
				
				<text lines="1" class="text_8">用户最多持有数量</text>
				<view class="item">
					2
				</view>
				
				<text lines="1" class="text_8">用户限购数量</text>
				<view class="item">
					20
				</view>
				
				<text lines="1" class="text_8">销售价格</text>
				<view class="item">
					¥88
				</view>
				
				<text lines="1" class="text_8">详情</text>
				<view class="item">
					sddddddd
				</view>
			</view>
			<view 
				style="position: fixed;width: 100%;height: 16vw;background-color: #fff;z-index: 999;bottom: 0;">
				<button class="button_3" @click="onClick">
					立即赠送
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				values1:true,
				values2:false,
				values3:true,
				values4:false,
				products: [{
						id: 1,
						name: "游泳单次票8.1",
						picture: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/10/98c0f70387e2f86289ebf71796a6d3.jpg?attname=16406643039503627660.jpg",
						selling_price: "60.00",
						venues_project: [{
							id: 27,
							name: "游泳"
						}],
					},
					{
						id: 2,
						name: "游泳单次票8.1",
						picture: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/10/98c0f70387e2f86289ebf71796a6d3.jpg?attname=16406643039503627660.jpg",
						selling_price: "60.00",
						venues_project: [{
							id: 27,
							name: "游泳"
						}],
					},
					{
						id: 3,
						name: "游泳单次票8.1",
						picture: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/10/98c0f70387e2f86289ebf71796a6d3.jpg?attname=16406643039503627660.jpg",
						selling_price: "60.00",
						venues_project: [{
							id: 27,
							name: "游泳",
						}],
					},
					{
						id: 4,
						name: "游泳单次票8.1",
						picture: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/10/98c0f70387e2f86289ebf71796a6d3.jpg?attname=16406643039503627660.jpg",
						selling_price: "60.00",
						venues_project: [{
							id: 27,
							name: "游泳",
						}],
					},
					{
						id: 5,
						name: "游泳单次票8.1",
						picture: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/10/98c0f70387e2f86289ebf71796a6d3.jpg?attname=16406643039503627660.jpg",
						selling_price: "60.00",
						venues_project: [{
							id: 27,
							name: "游泳",
						}],
					},
					{
						id: 6,
						name: "游泳单次票8.1",
						picture: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/10/98c0f70387e2f86289ebf71796a6d3.jpg?attname=16406643039503627660.jpg",
						selling_price: "60.00",
						venues_project: [{
							id: 27,
							name: "游泳",
						}],
					}
				],
				checked: 1,
				weekList: [{
					name: '礼品',
					id: '1'
				}, {
					name: '体验券',
					id: '2'
				}],
				weekSelect: [], //选中的
				noticeSelect: [], //选中的
				timeList: [{
						name: '即时发送',
						id: '1'
					},
					{
						name: '定时发送',
						id: '2'
					}
				],
				timeSelect: [], //选中的
				selectItemId: 0,
				selectId: 0,
				wrapperlist: [{
						money: '100',
						id: 1
					},
					{
						money: '100',
						id: 2
					},
					{
						money: '100',
						id: 3
					},
					{
						money: '100',
						id: 4
					},
					{
						money: '100',
						id: 5
					}
				],
				itemlist: {},
				show: false,
				value1: Number(new Date()),
				datatime: ''
			}
		},
		onLoad() {

		},
		methods: {
			confirmclick(value) {
				this.show = false
				let date = new Date(value.value);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				this.datatime = y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
				return y + '-' + MM + '-' + d; //年月日
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s; //年月日时分秒
			},
			onClick() {
				if (this.checked == 1) {
					this.itemlist = this.products[0]
				}
			},
			groupChange(n) {
			},
			radioChange(item, n) {
				this.checked = item.id
				this.itemlist = item
			},
			xzclick() {
				uni.navigateTo({
					url: '../member_profile/select_members'
				})
			},
			// 发送渠道
			handSelect(data) {
				if (this.weekSelect.includes(data)) {
					this.weekSelect = this.weekSelect.filter((item) => {
						return item !== data
					})
				} else {
					this.weekSelect.push(data)
				}
			},
			noticesSelect(item, index) {
				this.selectItemId = index
			},
			timesSelect(item, index) {
				this.selectId = index
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100vh;
		background-color: #dedede;

		.group_3 {
			background-color: rgba(255, 255, 255, 1.000000);
			width: 710rpx;
			height: 100vh;
			display: flex;
			flex-direction: column;
			margin: 20rpx 0 0 20rpx;

			.item {
				// padding: 29rpx 30rpx 30rpx;
				padding: 25rpx 30rpx 20rpx 30rpx;

				.item-title {
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					font-weight: 500;
					margin-bottom: 20rpx;
				}

				.value {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;
				}

				.time-cell {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;
					justify-content: flex-start;

					.time {
						width: 49%;

						&:last-of-type {
							margin-left: 20rpx;
						}
					}
				}

				.week-list {
					display: grid;
					grid-template-columns: repeat(5, 1fr);
					grid-gap: 20rpx;
					position: relative;

					.week-item {
						padding: 15rpx 0;
						background-color: rgb(243, 243, 243);
						border-radius: 5rpx;
						text-align: center;
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						font-weight: 500;
						border: solid 2rpx transparent;
						box-sizing: border-box;
					}

					.active {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;

						// &:before {
						// 	display: block;
						// 	content: '';
						// 	position: absolute;
						// 	width: 27rpx;
						// 	height: 28rpx;
						// 	right: -2rpx;
						// 	bottom: -2rpx;
						// 	background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/46b1cc85fcb0fd76095daf823b7d2bb4a3235519.png");
						// 	background-repeat: no-repeat;
						// 	background-size: 100%;
						// }
					}

					.active1 {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;
					}

					.active2 {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;
					}

					.check {
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						position: absolute;
						bottom: 10rpx;
						right: 0;
					}
				}
			}
		}

		.text_2 {
			width: 93rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 15rpx 0 0 21rpx;
		}

		.section_1 {
			width: 100%;
			height: 70rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			margin: 28rpx 0 0rpx 20rpx;
			border-bottom: solid 2rpx #efefef;
		}

		.section_11 {
			width: 100%;
			height: 160rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			margin: 28rpx 0 0rpx 20rpx;
			border-bottom: solid 2rpx #efefef;
		}
		.section_12 {
			width: 100%;
			height: 100rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			margin: 28rpx 0 0rpx 20rpx;
			border-bottom: solid 2rpx #efefef;
		}

		.box_3 {
			height: 40rpx;
			background-size: 100% 100%;
			display: flex;
			flex-direction: row;
			// width: 150rpx;
		}

		.label_1 {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
		}

		.label_2 {
			width: 40rpx;
			height: 40rpx;
			margin-left: -6rpx;
			border-radius: 50%;
		}

		.label_3 {
			width: 40rpx;
			height: 40rpx;
			margin-left: -6rpx;
			border-radius: 50%;
		}

		.label_4 {
			width: 140rpx;
			height: 140rpx;
			margin-left: -6rpx;
			// border-radius: 50%;
		}

		.image-text_1 {
			width: 150rpx;
			height: 27rpx;
			margin-top: 6rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			margin-right: 40rpx;
		}

		.text-group_1 {
			width: 126rpx;
			height: 27rpx;
			overflow-wrap: break-word;
			color: rgba(40, 40, 40, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
		}

		.text-group_2 {
			width: 126rpx;
			height: 40rpx;
			overflow-wrap: break-word;
			color: rgba(40, 40, 40, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 40rpx;
			margin-top: 20rpx;
		}

		.icon_2 {
			width: 7rpx;
			height: 14rpx;
			margin-top: 13rpx;
		}

		.section_2 {
			background-color: rgba(229, 229, 229, 1.0);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_3 {
			width: 47rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 42rpx 0 0 19rpx;
		}

		.text_4 {
			width: 82rpx;
			height: 26rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 24rpx 0 0 20rpx;
		}

		.section_3 {
			background-color: rgba(229, 229, 229, 1.0);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_5 {
			width: 47rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 39rpx 0 0 19rpx;
		}

		.text_6 {
			width: 82rpx;
			height: 26rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 24rpx 0 0 20rpx;
		}

		.section_4 {
			background-color: rgba(229, 229, 229, 1.0);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_7 {
			width: 95rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 39rpx 0 0 19rpx;
		}

		.image_2 {
			width: 151rpx;
			height: 151rpx;
			margin: 25rpx 0 0 18rpx;
		}


		.text_8 {
			width: 95rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 20rpx 0 0 19rpx;
		}

		.section_6 {
			width: 378rpx;
			height: 62rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			margin: 26rpx 0 27rpx 21rpx;
		}

		.button_1 {
			background-color: rgba(243, 243, 243, 1.0);
			height: 62rpx;
			display: flex;
			flex-direction: column;
			width: 174rpx;
		}

		.text_9 {
			width: 48rpx;
			height: 24rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 19rpx 0 0 63rpx;
		}

		.button_2 {
			background-color: rgba(255, 65, 5, 0.1);
			height: 62rpx;
			display: flex;
			flex-direction: column;
			width: 174rpx;
		}

		.text_10 {
			width: 73rpx;
			height: 24rpx;
			overflow-wrap: break-word;
			color: rgba(255, 98, 0, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 19rpx 0 0 51rpx;
		}

		.button_3 {
			width: 90%;
			height: 80rpx;
			position: absolute;
			bottom: 20rpx;
			background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));
			border-radius: 80rpx 80rpx;
			margin-left: 5%;
			color: rgba(255, 255, 255, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
		}
	}
</style>